<script setup>
import swiper1 from '../components/swiper1.vue'
import animeMiniPlayer1 from '../components/animeMiniPlayer1.vue'
import videoModel1 from '../components/videoModel1.vue'

import {ref,onMounted} from "vue"
import axios from "axios"
import { router } from '../router';

import smn_tj from "../../public/images/anime/smn_tj.jpg"
import gdyg_tj from "../../public/images/anime/gdyg_tj.jpg"

import wdxfhy_swiper from "../../public/images/swiper/wdxfhy_swiper.webp"
import yzhlk_swiper from "../../public/images/swiper/yzhlk_swiper.webp"
import stpgthgs_swiper from "../../public/images/swiper/stpgthgs_swiper.webp"
import dgbmwdr_swiper from "../../public/images/swiper/dgbmwdr_swiper.webp"

import wdxfhy_mini_swiper from "../../public/images/swiper/wdxfhy_mini_swiper.webp"
import yzhlk_mini_swiper from "../../public/images/swiper/yzhlk_mini_swiper.webp"
import stpgthgs_mini_swiper from "../../public/images/swiper/stpgthgs_mini_swiper.webp"
import dgbmwdr_mini_swiper from "../../public/images/swiper/dgbmwdr_mini_swiper.webp"

import play_white from "../../public/video/play_white.svg"

const local = "114.115.168.109"
const port = 8088

const image1 = wdxfhy_swiper
const image2 = yzhlk_swiper
const image3 = stpgthgs_swiper
const image4 = dgbmwdr_swiper

const image1Mini = wdxfhy_mini_swiper
const image2Mini = yzhlk_mini_swiper
const image3Mini = stpgthgs_mini_swiper
const image4Mini = dgbmwdr_mini_swiper
const setMove = ref("setMove")

//那些获取容器的变量
const fan_tuijianRef = ref(null)

//番剧的图片和视频链接变量
const gdygFmUrl = ref("")
const gdygVideoUrl = ref("")
const stpgthgsFmUrl = ref("")
const stpgthgsVideoUrl = ref("")
const myGoFmUrl = ref("")
const myGoVideoUrl = ref("")
const wdxfhyFmUrl = ref("")
const wdxfhyVideoUrl = ref("")
const yls1FmUrl = ref("")
const yls1VideoUrl = ref("")
const layzsjzfhFmUrl = ref("")
const layzsjzfhVideoUrl = ref("")
const loveliveSuperstarFmUrl = ref("")
const loveliveSuperstarVideoUrl = ref("")
//mini影剧院的详情背景图
const miniVideoMessageBackGroudImage = ref("")
//mini影剧院的详情背景图颜色
const miniVideoMessageBackGroud = ref("rgba(246,177,191,0.95)")
const miniVideoMessageBackGroud1 = ref("rgba(246,177,191,1)")

const fanName = ref("孤独摇滚")

//迷你小剧场中的主要video-url变量
const MasterVideo = ref("")

//判断番剧是否是初次加载
const isSetup = ref(true)

//孤独摇滚资源请求
axios.get(`http://${local}:${port}/anime/gdyg`).then(async res=>{
    // console.log(res.data)
    gdygFmUrl.value = await res.data[0].anime_image
    miniVideoMessageBackGroudImage.value = await `url(${gdyg_tj})`
    MasterVideo.value = await res.data[0].anime_msg[0].fan_player
    gdygVideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))

axios.get(`http://${local}:${port}/anime/stpgthgs`).then(async res=>{
    // console.log(res.data)
    stpgthgsFmUrl.value = await res.data[0].anime_image
    stpgthgsVideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))
axios.get(`http://${local}:${port}/anime/mygo`).then(async res=>{
    // console.log(res.data)
    myGoFmUrl.value = await res.data[0].anime_image
    myGoVideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))
axios.get(`http://${local}:${port}/anime/wdxfhy`).then(async res=>{
    // console.log(res.data)
    wdxfhyFmUrl.value = await res.data[0].anime_image
    wdxfhyVideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))
axios.get(`http://${local}:${port}/anime/yls1`).then(async res=>{
    // console.log(res.data)
    yls1FmUrl.value = await res.data[0].anime_image
    yls1VideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))
axios.get(`http://${local}:${port}/anime/layzsjzfh`).then(async res=>{
    // console.log(res.data)
    layzsjzfhFmUrl.value = await res.data[0].anime_image
    layzsjzfhVideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))
axios.get(`http://${local}:${port}/anime/lovelive-superstar`).then(async res=>{
    // console.log(res.data)
    loveliveSuperstarFmUrl.value = await res.data[0].anime_image
    loveliveSuperstarVideoUrl.value = await res.data[0].anime_msg[0].fan_player
}).catch(err=>console.log(err))

onMounted(()=>{
    document.title = "番剧 - EvenSO"
})
const goToAnimeAll = () => {
    router.push("/anime-all")
}

//番剧推荐容器的移动
const moveIn1 = () => {
    fan_tuijianRef.value.style.transform = "translateX(-250px)"
    fan_tuijianRef.value.style.width = "120%"
}
const moveOut1 = () => {
    fan_tuijianRef.value.style.transform = "translateX(0)"
    fan_tuijianRef.value.style.width = "100%"
}
const moveIn2 = () => {
    fan_tuijianRef.value.style.transform = "translateX(-300px)"
    fan_tuijianRef.value.style.width = "120%"
}
const moveOut2 = () => {
    fan_tuijianRef.value.style.transform = "translateX(0)"
    fan_tuijianRef.value.style.width = "100%"
}

//迷你小剧场番剧切换按键事件
const fan1Ref = ref(null)
const fan2Ref = ref(null)
const fan3Ref = ref(null)
const fan4Ref = ref(null)
const fan5Ref = ref(null)
const fan6Ref = ref(null)
const miniFan1 = ref(null)
const miniFan2 = ref(null)
const miniFan3 = ref(null)
const miniFan4 = ref(null)
const miniFan5 = ref(null)
const miniFan6 = ref(null)
const miniVideoGoToFan = ref("gdyg")
const goToFan = () => {
    router.push(`/anime-player/${miniVideoGoToFan.value}/1`)
}
const fan1Btn = async() => {
    //资源请求和信息切换
    fanName.value = await "孤独摇滚"
    miniVideoMessageBackGroud.value = await "rgba(246,177,191,0.95)"
    miniVideoMessageBackGroudImage.value = await `url(${gdyg_tj})`
    miniVideoMessageBackGroud1.value = await "rgba(246,177,191,1)"
    axios.get('/go1-api/anime/gdyg').then(async res=>{
        gdygVideoUrl.value = await res.data[0].anime_msg[0].fan_player
        MasterVideo.value = await res.data[0].anime_msg[0].fan_player
    }).catch(err=>console.log(err))
    fan1Ref.value.style.opacity = 1
    fan2Ref.value.style.opacity = 0.6
    fan3Ref.value.style.opacity = 0.6
    fan4Ref.value.style.opacity = 0.6
    fan5Ref.value.style.opacity = 0.6
    fan6Ref.value.style.opacity = 0.6
    miniVideoGoToFan.value = "gdyg"
    //迷你剧场图片切换
    miniFan1.value.style.transform = "translatex(0)"
    miniFan2.value.style.transform = "translatex(0)"
    miniFan3.value.style.transform = "translatex(0)"
    miniFan4.value.style.transform = "translatex(0)"
    miniFan5.value.style.transform = "translatex(0)"
    miniFan6.value.style.transform = "translatex(0)"
}
const fan2Btn = async() => {
    //资源请求和信息切换
    fanName.value = await "总之就是非常可爱第一季"
    miniVideoMessageBackGroud.value = await "rgba(0,255,255,0.95)"
    miniVideoMessageBackGroudImage.value = await "url(../../public/images/anime/zzjsfcka1_tj.jpg)"
    miniVideoMessageBackGroud1.value = await "rgba(0,255,255,1)"
    axios.get("/go1-api/anime/zzjsfcka").then(async res=>{
        MasterVideo.value = await res.data[0].anime_msg[0].fan_player
    }).catch(err=>console.log(err))
    fan1Ref.value.style.opacity = 0.6
    fan2Ref.value.style.opacity = 1
    fan3Ref.value.style.opacity = 0.6
    fan4Ref.value.style.opacity = 0.6
    fan5Ref.value.style.opacity = 0.6
    fan6Ref.value.style.opacity = 0.6
    miniVideoGoToFan.value = "zzjsfcka"
    //迷你剧场图片切换
    miniFan1.value.style.transform = "translatex(0)"
    miniFan2.value.style.transform = "translatex(-180px)"
    miniFan3.value.style.transform = "translatex(-180px)"
    miniFan4.value.style.transform = "translatex(-180px)"
    miniFan5.value.style.transform = "translatex(-180px)"
    miniFan6.value.style.transform = "translatex(-180px)"
}
const fan3Btn = async() => {
    //资源请求和信息切换
    fanName.value = await "久保同学不放过我"
    miniVideoMessageBackGroud.value = await "rgba(144,112,162,0.95)"
    miniVideoMessageBackGroudImage.value = await "url(../../public/images/anime/jbtxbfgw_tj.jpg)"
    miniVideoMessageBackGroud1.value = await "rgba(144,112,162,1)"
    axios.get("/go1-api/anime/jbtxbfgw").then(async res=>{
        MasterVideo.value = await res.data[0].anime_msg[0].fan_player
    }).catch(err=>console.log(err))
    fan1Ref.value.style.opacity = 0.6
    fan2Ref.value.style.opacity = 0.6
    fan3Ref.value.style.opacity = 1
    fan4Ref.value.style.opacity = 0.6
    fan5Ref.value.style.opacity = 0.6
    fan6Ref.value.style.opacity = 0.6
    miniVideoGoToFan.value = "jbtxbfgw"
    //迷你剧场图片切换
    miniFan1.value.style.transform = "translatex(0)"
    miniFan2.value.style.transform = "translatex(-180px)"
    miniFan3.value.style.transform = "translatex(-360px)"
    miniFan4.value.style.transform = "translatex(-360px)"
    miniFan5.value.style.transform = "translatex(-360px)"
    miniFan6.value.style.transform = "translatex(-360px)"
}

const fan4Btn = async() => {
//资源请求和信息切换
    fanName.value = await "擅长捉弄的高木同学"
    miniVideoMessageBackGroud.value = await "rgba(252,196,171,0.95)"
    miniVideoMessageBackGroudImage.value = await "url(../../public/images/anime/sczndgmtx_tj.jpg)"
    miniVideoMessageBackGroud1.value = await "rgba(252,196,171,1)"
    axios.get("/go1-api/anime/sczndgmtx").then(async res=>{
        MasterVideo.value = await res.data[0].anime_msg[0].fan_player
    }).catch(err=>console.log(err))
    fan1Ref.value.style.opacity = 0.6
    fan2Ref.value.style.opacity = 0.6
    fan3Ref.value.style.opacity = 0.6
    fan4Ref.value.style.opacity = 1
    fan5Ref.value.style.opacity = 0.6
    fan6Ref.value.style.opacity = 0.6
    miniVideoGoToFan.value = "sczndgmtx"
    //迷你剧场图片切换
    miniFan1.value.style.transform = "translatex(0)"
    miniFan2.value.style.transform = "translatex(-180px)"
    miniFan3.value.style.transform = "translatex(-360px)"
    miniFan4.value.style.transform = "translatex(-550px)"
    miniFan5.value.style.transform = "translatex(-550px)"
    miniFan6.value.style.transform = "translatex(-550px)"
}

const fan5Btn = async() => {
//资源请求和信息切换
    fanName.value = await "萌妻食神"
    miniVideoMessageBackGroud.value = await "rgba(203,82,70,0.9)"
    miniVideoMessageBackGroudImage.value = await "url(../../public/images/anime/mqss_tj.jpg)"
    miniVideoMessageBackGroud1.value = await "rgba(203,82,70,1)"
    axios.get("/go1-api/anime/mqss").then(async res=>{
        MasterVideo.value = await res.data[0].anime_msg[0].fan_player
    }).catch(err=>console.log(err))
    fan1Ref.value.style.opacity = 0.6
    fan2Ref.value.style.opacity = 0.6
    fan3Ref.value.style.opacity = 0.6
    fan4Ref.value.style.opacity = 0.6
    fan5Ref.value.style.opacity = 1
    fan6Ref.value.style.opacity = 0.6
    miniVideoGoToFan.value = "mqss"
    //迷你剧场图片切换
    miniFan1.value.style.transform = "translatex(500px)"
    miniFan2.value.style.transform = "translatex(-202px)"
    miniFan3.value.style.transform = "translatex(-383px)"
    miniFan4.value.style.transform = "translatex(-580px)"
    miniFan5.value.style.transform = "translatex(-770px)"
    miniFan6.value.style.transform = "translatex(-770px)"
}

const fan6Btn = async() => {
//资源请求和信息切换
    fanName.value = await "赛马娘第二季"
    miniVideoMessageBackGroud.value = await "rgba(83,89,175,0.95)"
    miniVideoMessageBackGroudImage.value = await `url(${smn_tj})`
    miniVideoMessageBackGroud1.value = await "rgba(83,89,175,1)"
    axios.get("/go1-api/anime/smn").then(async res=>{
        // console.log(res.data[1].anime_msg[0].fan_player)
        MasterVideo.value = await res.data[1].anime_msg[0].fan_player
    }).catch(err=>console.log(err))
    fan1Ref.value.style.opacity = 0.6
    fan2Ref.value.style.opacity = 0.6
    fan3Ref.value.style.opacity = 0.6
    fan4Ref.value.style.opacity = 0.6
    fan5Ref.value.style.opacity = 0.6
    fan6Ref.value.style.opacity = 1
    miniVideoGoToFan.value = "smn2"
    //迷你剧场图片切换
    miniFan1.value.style.transform = "translatex(300px)"
    miniFan2.value.style.transform = "translatex(-202px)"
    miniFan3.value.style.transform = "translatex(-383px)"
    miniFan4.value.style.transform = "translatex(-580px)"
    miniFan5.value.style.transform = "translatex(-770px)"
    miniFan6.value.style.transform = "translatex(-960px)"
}
</script>

<template>
    <div class="titleBox">
        <div class="swiperImagesChangBox">
            <swiper1 
            :image1="image1"
            :image2="image2"
            :image3="image3"
            :image4="image4"

            :image1Mini="image1Mini"
            :image2Mini="image2Mini"
            :image3Mini="image3Mini"
            :image4Mini="image4Mini"

            miniWZ="ab"
            />
        </div>

        <div class="fan_tuijian_box">
            <div class="fan_name_box">
                <span>番剧推荐</span>
                <span @click="goToAnimeAll()">更多番剧</span>
            </div>
            <div class="fan_master_box" ref="fan_tuijianRef">
                <div class="animeMiniPlayer1Class">
                    <animeMiniPlayer1 
                    :imageUrl="gdygFmUrl"
                    :videoUrl="gdygVideoUrl"
                    fanLink="gdyg/1"/>
                </div>
                <div class="animeMiniPlayer1Class">
                    <animeMiniPlayer1 
                    :imageUrl="stpgthgsFmUrl"
                    :videoUrl="stpgthgsVideoUrl"
                    fanLink="stpgthgs/1"/>
                </div>
                <div class="animeMiniPlayer1Class">
                    <animeMiniPlayer1 
                    :imageUrl="myGoFmUrl"
                    :videoUrl="myGoVideoUrl"
                    fanLink="mygo/1"/>
                </div>
                <div class="animeMiniPlayer1Class">
                    <animeMiniPlayer1 
                    :imageUrl="wdxfhyFmUrl"
                    :videoUrl="wdxfhyVideoUrl"
                    fanLink="wdxfhy/1"/>
                </div>
                <div class="animeMiniPlayer1Class">
                    <animeMiniPlayer1 
                    :imageUrl="yls1FmUrl"
                    :videoUrl="yls1VideoUrl"
                    fanLink="yls1/1"/>
                </div>
                <div class="animeMiniPlayer1Class" @mouseover="moveIn1()" @mouseout="moveOut1()">
                    <animeMiniPlayer1 
                    :imageUrl="layzsjzfhFmUrl"
                    :videoUrl="layzsjzfhVideoUrl"
                    fanLink="layzsjzfh/1"/>
                </div>
                <div class="animeMiniPlayer1Class" @mouseover="moveIn2()" @mouseout="moveOut2()">
                    <animeMiniPlayer1 
                    :imageUrl="loveliveSuperstarFmUrl"
                    :videoUrl="loveliveSuperstarVideoUrl"
                    fanLink="lovelivesuperstar/1"/>
                </div>
            </div>
        </div>
    </div>

    <div class="miniVideoPlayerBox">
        <div class="miniVideoMasterBox">
            <videoModel1
                :videoUrl="MasterVideo"
                borderRadius="20px"
                :isSetup="isSetup"
            />
        </div>
        <div class="miniVideoMessageBox" :style="{
            backgroundColor:miniVideoMessageBackGroud1
        }">
            <div class="miniVideoMessageMasterBox" :style="{
                backgroundColor:miniVideoMessageBackGroud,
                backgroundImage: miniVideoMessageBackGroudImage
            }">
                <!-- <img :src="miniVideoMessageBackGroudImage" alt="" class=""/> -->
                <div class="miniVideoMessageMasterBoxDetail" :style="{
                    backgroundColor:miniVideoMessageBackGroud,
                }">
                    <div class="kongbai1"></div>
                    <div class="fanNameBox">
                        <span>{{ fanName }}</span>
                    </div>

                    <div class="fanMessageBox">
                        
                    </div>
                    
                    <div class="detailFuncBox">
                        <div class="playBtnBox">
                            <div class="playBtn">
                                <img :src="play_white" alt="" @click="goToFan()"/>
                            </div>
                        </div>
                    </div>
                    
                    <div class="miniSwiperBox">
                        <div class="miniFan1" ref="miniFan1">
                            <img src="../../public/images/anime/gdyg_tj.jpg" alt="" @click="fan1Btn" ref="fan1Ref"/>
                        </div>
                        <div class="miniFan2" ref="miniFan2">
                            <img src="../../public/images/anime/zzjsfcka1_tj.jpg" alt="" @click="fan2Btn" ref="fan2Ref"/>
                        </div>
                        <div class="miniFan3" ref="miniFan3">
                            <img src="../../public/images/anime/jbtxbfgw_tj.jpg" alt="" @click="fan3Btn" ref="fan3Ref"/>
                        </div>
                        <div class="miniFan4" ref="miniFan4">
                            <img src="../../public/images/anime/sczndgmtx_tj.jpg" alt="" @click="fan4Btn" ref="fan4Ref"/>
                        </div>
                        <div class="miniFan5" ref="miniFan5">
                            <img src="../../public/images/anime/mqss_tj.jpg" alt="" @click="fan5Btn" ref="fan5Ref"/>
                        </div>
                        <div class="miniFan6" ref="miniFan6">
                            <img src="../../public/images/anime/smn_tj.jpg" alt="" @click="fan6Btn" ref="fan6Ref"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@media screen and (min-width: 1200px) and (max-width: 2000px){
    .titleBox{
        position: absolute;
        left: 0;
        top: 0;
        width: 1855px;
        height: 70%;
        display: flex;
        z-index: 2;
    }
    .swiperImagesChangBox{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .fan_tuijian_box{
        position: absolute;
        left: 0;
        top: 100%;
        width: 1855px;
        height: 70%;
    }
    .fan_name_box{
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
    }
    .fan_name_box span:nth-child(1){
        font-size: 30px;
        font-weight: 600;
    }
    .fan_name_box span:nth-child(2){
        position: absolute;
        right: 3%;
        width: 7%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(150, 150, 150, 0.5);
        border-radius: 10px;
        user-select: none;
        cursor: pointer;
    }
    .fan_master_box{
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        transition: all 0.5s;
        overflow: hidden;
    }
    .animeMiniPlayer1Class{
        margin-left: 10px;
    }
    .miniVideoPlayerBox{
        position: absolute;
        left: 0;
        top: 1100px;
        width: 1855px;
        height: 800px;
    }
    .miniVideoMasterBox{
        position: absolute;
        left: 200px;
        top: 50px;
        width: 1000px;
        height: 563px;
        background-color: black;
        border-radius: 20px;
        z-index: 2;
    }
    .miniVideoMessageBox{
        position: absolute;
        left: 250px;
        top: 80px;
        width: 1550px;
        height: 560px;
        z-index: 1;
        border-radius: 20px;
        background-position: 50%;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .miniVideoMessageMasterBox{
        position: absolute;
        right: 0;
        top: 0;
        width: 38.7%;
        height: 100%;
        /* background: red; */
        background-repeat: no-repeat;
        background-position: 50%;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 2;
        transition: all 0.3s;
    }
    .miniVideoMessageMasterBoxDetail{
        width: 100%;
        height: 100%;
        /* background-color: rgba(255,255,0,0.95); */
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .kongbai1{
        width: 100%;
        height: 10%;
    }
    .fanNameBox{
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }
    .fanNameBox span{
        font-size: 30px;
        font-weight: 600;
        color: #fff;
        user-select: none;
    }

    .fanMessageBox{
        width: 100%;
        height: 5%;
        display: flex;
    }

    .detailFuncBox{
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
    }
    .playBtnBox{
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .playBtn{
        width: 50%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        user-select: none;
    }
    .playBtn img{
        width: 30px;
        height: 30px;
    }
    .miniSwiperBox{
        width: 400%;
        height: 40%;
        display: flex;
        align-items: center;
    }
    .miniFan1{
        margin-left: 10px;
        width: 8%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        transition: all 0.3s;
        user-select: none;
    }
    .miniFan1 img{
        width: 97%;
        height: 95%;
        border-radius: 10px;
        /* transition: all 0.3s; */
    }
    .miniFan2{
        margin-left: 10px;
        width: 8%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        transition: all 0.3s;
        user-select: none;
    }
    .miniFan2 img{
        width: 97%;
        height: 95%;
        border-radius: 10px;
        opacity: 0.6;
        /* transition: all 0.3s; */
    }
    .miniFan3{
        margin-left: 10px;
        margin-right: 10px;
        width: 8%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        transition: all 0.3s;
        user-select: none;
    }
    .miniFan3 img{
        width: 97%;
        height: 95%;
        border-radius: 10px;
        opacity: 0.6;
        /* transition: all 0.3s; */
    }
    .miniFan4{
        margin-left: 10px;
        margin-right: 10px;
        width: 8%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        transition: all 0.3s;
        user-select: none;
    }
    .miniFan4 img{
        width: 97%;
        height: 95%;
        border-radius: 10px;
        opacity: 0.6;
    }
    .miniFan5{
        margin-left: 10px;
        margin-right: 10px;
        width: 8%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        transition: all 0.3s;
        user-select: none;
    }
    .miniFan5 img{
        width: 97%;
        height: 95%;
        border-radius: 10px;
        opacity: 0.6;
    }
    .miniFan6{
        margin-left: 10px;
        margin-right: 10px;
        width: 8%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        transition: all 0.3s;
        user-select: none;
    }
    .miniFan6 img{
        width: 97%;
        height: 95%;
        border-radius: 10px;
        opacity: 0.6;
    }
}

@media screen and (min-width: 0px) and (max-width: 1199px){
    .titleBox{
        position: absolute;
        left: 0;
        top: 0;
    }
    .swiperImagesChangBox{
        width: 100%;
        height: 100%;

        overflow: hidden;
    }
    .fan_tuijian_box{
        position: absolute;
        left: 0;
        top: 100%;
        width: 1199px;
        height: 70%;
    }
    .fan_name_box{
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
    }
    .fan_name_box span:nth-child(1){
        font-size: 20px;
        font-weight: 600;
    }
    .fan_name_box span:nth-child(2){
        position: absolute;
        right: 3%;
        width: 7%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(150, 150, 150, 0.5);
        border-radius: 10px;
        user-select: none;
        cursor: pointer;
    }
    .fan_master_box {
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        transition: all 0.5s;
        overflow: hidden;
    }
    .animeMiniPlayer1Class{
        margin-left: 10px;
        /* display: flex; */
    }
    .miniVideoPlayerBox{
        position: absolute;
        left: 0;
        top: 650px;
        width: 1855px;
        height: 800px;
    }
    .miniVideoMasterBox{
        position: absolute;
        left: 50px;
        top: -100px;
        width: 500px;
        height: 240px;
        background-color: black;
        border-radius: 20px;
        z-index: 2;
    }
    .miniVideoMessageBox{
        position: absolute;
        left: 100px;
        top: -80px;
        width: 720px;
        height: 250px;
        z-index: 1;
        border-radius: 20px;
        background-position: 50%;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .kongbai1{
        width: 100%;
        height: 10%;
    }
    .miniVideoMessageMasterBox{
        position: absolute;
        right: 0;
        top: 0;
        width: 37.5%;
        height: 100%;
        /* background: red; */
        background-repeat: no-repeat;
        background-position: 50%;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 2;
        transition: all 0.3s;
        
    }
}


</style>